<p>Sliding shelfs are quite popular lately, whether they are used on static website or for instance on Wordpress or any other CMS. As you might have noticed, this template that I am using right now has small arrow next to the post date - you can collapse and roll out any post. You can find sliding shelf when posting comments on frontpage too.</p>

<p>We are going to make simple sliding shelf:</p>
<iframe src="ajax-sliding-shelf.html" style="border:none; width:400px; height:200px; clear:both; margin:1em auto;" ></iframe>
<p>So how it works? I am using <a href="http://mootools.net">Mootools javascript framework</a>, <a href="http://docs.mootools.net/Effects/Fx-Slide.js">Fx.Slide class</a> in particular. As you can see on <a href="http://demos.mootools.net/Fx.Slide">demo site</a>, the code is quite short and easy to understand - but we are creating Ajax shelf - with loading ;).
</p>
<p>First we have to do the HTML and CSS:</p>

<strong>HTML</strong>
<pre lang="html">
<div id="wrap">
 <div id="header" class="arrow-down">
  <p>Ajax sliding shelf</p><img src="ajax-loader.gif" id="loading" /><br style="clear:both;" />
 </div>
 <div id="shelf"></div>
</div>
</pre>
and don't forget to put this in between header tags:
<pre lang="html">
<script type="text/javascript" src="mootools.js"></script>
</pre>
<strong>CSS</strong>
<pre lang="css">
* {padding:0; margin:0;}
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#171717; padding:1em;}
a {color:#b0fa0f;}
#wrap {width:300px; margin:0 auto; background:#242424;}
#header {padding:5px 10px 5px 30px; color:#b0fa0f;  cursor:pointer;}
#header p {float:left;}
/*Arrows - class for each position*/
.arrow-down {background:url(arrow-down.gif) no-repeat #2d2d2d 10px 10px;}
.arrow-up {background:url(arrow-up.gif) no-repeat #2d2d2d 10px 10px;}
#shelf {padding:1em; color:#CCCCCC; }
#loading {float:right;}
</pre>
You can get a nice animated gif for loading at <a href="http://www.ajaxload.info/">ajaxload.info</a>.

Now comes the fun part, javascript. First we have to put there domready event
<pre lang="javascript">
window.addEvent('domready', function() { 

});</pre>

Next step will be the sliding itself:
<pre lang="javascript">
var shelf = new Fx.Slide('shelf').hide(); //Create new Fx.Slide object from shelf div, also the hide() function hides the div when the window loads
 $('header').addEvent('click', function(e) { //Adds an onClick event to header div
    e = new Event(e); 
	shelf.toggle(); //toggles the div
	e.stop(); //this makes sure that the user wont be sent to given url (or that the page refreshes when using dummy url like "#" if the clicked element was a link 
 });

</pre>

Now when the shelf is sliding up and down we can also change the arrow according to the direction of slide:

<pre lang="javascript">
 var shelf = new Fx.Slide('shelf').hide(); //Create new Fx.Slide object from shelf div, also the hide() function hides the div when the window loads
 $('header').addEvent('click', function(e) { //Adds an onClick event to header div
    e = new Event(e); 
	shelf.toggle(); //toggles the div	
    if ($('header').hasClass('arrow-down')){
	 $('header').removeClass('arrow-down').addClass('arrow-up');
	}
	else {
	 $('header').removeClass('arrow-up').addClass('arrow-down');
	}
	e.stop(); //this makes sure that the user wont be sent to given url (or that the page refreshes when using dummy url like "#" if the clicked element was a link 
 });
 </pre>
 
This state would be good for static content, but we want ajax, don't we? 
<pre lang="javascript">
  $('loading').setStyle('display', 'none'); //hides the loading image
 var shelf = new Fx.Slide('shelf').hide(); //creates new Fx.Slide object from shelf div, also the hide() function hides the div when the page loads
 $('header').addEvent('click', function(e) { //Adds an onClick event to header div
    e = new Event(e); 	
	
	if ($('header').hasClass('arrow-down')) { //checks if the sliding direction is down - we dont want to send ajax request when hiding the shelf
	$('shelf').empty() //empties the shelf
	$('loading').setStyle('display', 'block'); //Displays the loading image
	new Ajax ('ajax-response.html', //url of file
	 {method: 'get', //method
	  update: $('shelf'), // element that will be updated with response
	  onComplete: function() { 
	  $('loading').setStyle('display', 'none'); //Hides the loading image 
	    shelf.toggle(); //toggles the shelf
		 } 		 
	  }).request(); //sends the request
    }
	else { 
	shelf.toggle(); //in case we dont want to send ajax request, we just slide it out
	}
	
    if ($('header').hasClass('arrow-down')){
	 $('header').removeClass('arrow-down').addClass('arrow-up');
	}
	else {
	 $('header').removeClass('arrow-up').addClass('arrow-down');
	}
	
	e.stop(); //this makes sure that the user wont be sent to given url (or that the page refreshes when using dummy url like "#") if the clicked element was a link 
 });
</pre>

Ok, now it smoothly loads the ajax-response.html file while showing/hiding loading image. 

